<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<input type="file" id="files1" name="files[]" multiple />
<output id="list1"></output>

<script>
	function handleFileSelect(evt)
	{
		var files = evt.target.files; // FileList object

		// files is a FileList of File objects. List some properties.
		var output = [];
		for (var i = 0, f; f = files[i]; i++)
		{
			output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
					f.size, ' bytes, last modified: ',
					f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
					'</li>');
		}
		document.getElementById('list1').innerHTML = '<ul>' + output.join('') + '</ul>';
	}

	document.getElementById('files1').addEventListener('change', handleFileSelect, false);
</script>
<div id="drop_zone">Drop files here</div>
<output id="list2"></output>

<script>
	function handleFileSelect(evt)
	{
		evt.stopPropagation();
		evt.preventDefault();

		var files = evt.dataTransfer.files; // FileList object.

		// files is a FileList of File objects. List some properties.
		var output = [];
		for (var i = 0, f; f = files[i]; i++)
		{
			output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
					f.size, ' bytes, last modified: ',
					f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
					'</li>');
		}
		document.getElementById('list2').innerHTML = '<ul>' + output.join('') + '</ul>';
	}

	function handleDragOver(evt)
	{
		evt.stopPropagation();
		evt.preventDefault();
		evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
	}

	// Setup the dnd listeners.
	var dropZone = document.getElementById('drop_zone');
	dropZone.addEventListener('dragover', handleDragOver, false);
	dropZone.addEventListener('drop', handleFileSelect, false);
</script>
<style>
	.thumb
	{
		height: 75px;
		border: 1px solid #000;
		margin: 10px 5px 0 0;
	}
</style>

<input type="file" id="files3" name="files[]" multiple />
<output id="list3"></output>

<script>
	function handleFileSelect(evt)
	{
		var files = evt.target.files; // FileList object

		// Loop through the FileList and render image files as thumbnails.
		for (var i = 0, f; f = files[i]; i++)
		{

			// Only process image files.
			if (!f.type.match('image.*'))
			{
				continue;
			}

			var reader = new FileReader();

			// Closure to capture the file information.
			reader.onload = (function (theFile)
			{
				return function (e)
				{
					// Render thumbnail.
					var span = document.createElement('span');
					span.innerHTML = ['<img class="thumb" src="', e.target.result,
						'" title="', escape(theFile.name), '"/>'].join('');
					document.getElementById('list3').insertBefore(span, null);
				};
			})(f);

			// Read in the image file as a data URL.
			reader.readAsDataURL(f);
		}
	}

	document.getElementById('files3').addEventListener('change', handleFileSelect, false);
</script>
<style>
	#byte_content
	{
		margin: 5px 0;
		max-height: 100px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#byte_range
	{ margin-top: 5px; }
</style>

<input type="file" id="files4" name="file" /> Read bytes:
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>

<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
	function readBlob(opt_startByte, opt_stopByte)
	{

		var files = document.getElementById('files4').files;
		if (!files.length)
		{
			alert('Please select a file!');
			return;
		}

		var file = files[0];
		var start = parseInt(opt_startByte) || 0;
		var stop = parseInt(opt_stopByte) || file.size - 1;

		var reader = new FileReader();

		// If we use onloadend, we need to check the readyState.
		reader.onloadend = function (evt)
		{
			if (evt.target.readyState == FileReader.DONE)
			{ // DONE == 2
				document.getElementById('byte_content').textContent = evt.target.result;
				document.getElementById('byte_range').textContent =
						['Read bytes: ', start + 1, ' - ', stop + 1,
							' of ', file.size, ' byte file'].join('');
			}
		};

		var blob = file.slice(start, stop + 1);
		reader.readAsBinaryString(blob);
	}

	document.querySelector('.readBytesButtons').addEventListener('click', function (evt)
	{
		if (evt.target.tagName.toLowerCase() == 'button')
		{
			var startByte = evt.target.getAttribute('data-startbyte');
			var endByte = evt.target.getAttribute('data-endbyte');
			readBlob(startByte, endByte);
		}
	}, false);
</script>
<style>
	#progress_bar
	{
		margin: 10px 0;
		padding: 3px;
		border: 1px solid #000;
		font-size: 14px;
		clear: both;
		opacity: 0;
		-moz-transition: opacity 1s linear;
		-o-transition: opacity 1s linear;
		-webkit-transition: opacity 1s linear;
	}
	#progress_bar.loading
	{
		opacity: 1.0;
	}
	#progress_bar .percent
	{
		background-color: #99ccff;
		height: auto;
		width: 0;
	}
</style>

<input type="file" id="files5" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar">
	<div class="percent">0%</div>
</div>

<script>
	var reader;
	var progress = document.querySelector('.percent');

	function abortRead()
	{
		reader.abort();
	}

	function errorHandler(evt)
	{
		switch (evt.target.error.code)
		{
			case evt.target.error.NOT_FOUND_ERR:
				alert('File Not Found!');
				break;
			case evt.target.error.NOT_READABLE_ERR:
				alert('File is not readable');
				break;
			case evt.target.error.ABORT_ERR:
				break; // noop
			default:
				alert('An error occurred reading this file.');
		}
	}

	function updateProgress(evt)
	{
		// evt is an ProgressEvent.
		if (evt.lengthComputable)
		{
			var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
			// Increase the progress bar length.
			if (percentLoaded < 100)
			{
				progress.style.width = percentLoaded + '%';
				progress.textContent = percentLoaded + '%';
			}
		}
	}

	function handleFileSelect(evt)
	{
		// Reset progress indicator on new file selection.
		progress.style.width = '0%';
		progress.textContent = '0%';

		reader = new FileReader();
		reader.onerror = errorHandler;
		reader.onprogress = updateProgress;
		reader.onabort = function (e)
		{
			alert('File read cancelled');
		};
		reader.onloadstart = function (e)
		{
			document.getElementById('progress_bar').className = 'loading';
		};
		reader.onload = function (e)
		{
			// Ensure that the progress bar displays 100% at the end.
			progress.style.width = '100%';
			progress.textContent = '100%';
			setTimeout("document.getElementById('progress_bar').className='';", 2000);
		};

		// Read in the image file as a binary string.
		reader.readAsBinaryString(evt.target.files[0]);
	}

	document.getElementById('files5').addEventListener('change', handleFileSelect, false);
</script>
<script>
	// Check for the various File API support.
	if (window.File && window.FileReader && window.FileList && window.Blob)
	{
		// Great success! All the File APIs are supported.
		alert('OK!');
	}
	else
	{
		alert('The File APIs are not fully supported in this browser.');
	}
</script>
</body>
</html>